<template>
  <div id="allDetail">
    <div class="myDiv">
      <el-dropdown trigger="click"
                   style="float: right">
        <span class="el-dropdown-link">
          <el-button type="success">点我查看<i class="el-icon-caret-bottom el-icon--right" /></el-button>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix"> 我的帖子 </el-dropdown-item>
          <el-dropdown-item class="clearfix"> 我的收藏 </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            站内信
            <el-badge class="mark"
                      :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="articleContainer">
      <div class="title">
        <b>{{ articleInfo.title }}</b>
      </div>
      <div class="artInfoDiv">
        <span><i class="el-icon-document" />{{ themeWords[articleInfo.theme] }}</span>
        <span><i class="el-icon-user" />{{ articleInfo.nickName }} </span>
        <span><i class="el-icon-time" />{{ articleInfo.createtime }}</span>
        <span><i class="el-icon-view" />{{ articleInfo.viewnumber }}</span>
        <span><i class="el-icon-chat-line-square" />{{ articleInfo.commentnumber }}</span>
        <el-link :underline="false"
                 @click="dialogShow">编辑</el-link>
        <el-link :underline="false"
                 @click="test">收藏</el-link>
        <el-link :underline="false"
                 style="color: red"
                 @click="accuseFlag = true">举报</el-link>
        <el-link :underline="false"
                 style="color: red"
                 @click="punishFlag = true">处理</el-link>
      </div>
      <div v-if="articleInfo.statusflag == 2"
           class="postStatus">
        <img src="../../assets/articleStatus_pic/yizhihuan.gif">
      </div>
      <div v-if="articleInfo.statusflag == 3"
           class="postStatus">
        <img src="../../assets/articleStatus_pic/yiguoqi.gif">
      </div>
      <div class="articleContent"
           v-html="articleInfo.content" />
    </div>
    <el-card>
      <div>
        <el-row>
          <el-button type="primary"
                     @click="gotobuttom"><i class="el-icon-s-promotion" /><span>评论</span></el-button>
          <!-- <el-pagination :current-page.sync="currentPage3"
                         :page-size="100"
                         layout="prev, pager, next, jumper"
                         :total="1000"
                         style="float: right"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" /> -->
        </el-row>
      </div>
    </el-card>
    <div class="card">
      <div class="cardHeader">
        <strong v-if="comments.length>0">{{ comments.length }}回复</strong>
        <strong v-else>暂无评论</strong>
      </div>
      <!-- <div class="emptyComment">
        <el-empty
          v-if="comments.length<1"
          description="描述文字"
          class="empty"
        />
      </div> -->
      <div v-for="(comment,index) in comments"
           :key="comment"
           class="comments">
        <!-- 单个comment div -->
        <div>
          <el-row>
            <el-col :span="1">
              <div>
                <el-avatar> user </el-avatar>
              </div>
            </el-col>
            <el-col :span="22">
              <div>
                <el-row>
                  <a style="width=100%;"
                     class="username">{{
                    comment.nickname
                  }}</a>
                  <span id="cid"># 评论楼层</span>
                </el-row>
                <el-row>
                  <span id="cdate">{{ comment.createtime }}</span>
                  <el-link :disabled="comment.deleteflag"
                           style="font-size: 12px; margin-left: 10px"
                           @click="showInputComment(index)">回复</el-link>
                  <el-link :disabled="comment.deleteFlag"
                           style="font-size: 12px; margin-left: 10px"
                           @click="deleteComment(index)">删除</el-link>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!-- 评论没有没删除就显示内容 -->
          <div v-show="!comment.deleteFlag"
               class="message"
               v-html="comment.content">
            <!-- {{ comment.content }} -->
          </div>
          <!-- 评论被删除时显示 -->
          <div v-show="comment.deleteFlag"
               id="deleteCommentDiv">
            该评论已被删除
          </div>
          <div v-if="comment.replyComments != null"
               class="comment_in_comment">
            <!-- 子评论 -->
            <div v-for="replyComment in comment.replyComments"
                 :key="replyComment"
                 class="childComment">
              <el-row>
                <el-col :span="1">
                  <div>
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                      user
                    </el-avatar>
                  </div>
                </el-col>
                <el-col :span="22"
                        style="margin-left: 10px">
                  <div>
                    <el-row>
                      <a style="width=300px;"
                         class="username">{{
                        replyComment.nickname
                      }}</a>
                      <span style="margin: 0 3px; font-size: 14px">@</span>
                      <a style="width=300px;"
                         class="username">{{
                        replyComment.parentNickname
                      }}</a>
                    </el-row>
                    <el-row>
                      <span id="cdate">{{ replyComment.createtime }}</span>
                      <el-link style="font-size: 12px; margin-left: 10px"
                               @click="replyComment.inputFlag = true">回复</el-link>
                      <el-link style="font-size: 12px; margin-left: 10px">删除</el-link>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <div class="c_in_c">
                {{ replyComment.content }}
              </div>
              <!-- 子评论回复框 -->
              <div v-show="replyComment.inputFlag">
                <el-input v-model="newComment.content"
                          :placeholder="replyTo(replyComment.nickname)"
                          style="width: 70%; padding-left: 57px" />
                <el-button type="primary"
                           style="margin-left: 10px"
                           @click="commentInsert(replyComment.commenterid,replyComment.commentid)">
                  评论
                </el-button>
                <el-button @click="replyComment.inputFlag = false">收起</el-button>
              </div>
            </div>
          </div>
          <!-- 层主回复框 -->
          <div v-show="comment.inputFlag"
               :id="generateId(index)"
               style="margin-top: 10px">
            <el-input v-model="newComment.content"
                      placeholder="给楼主评论"
                      style="width: 70%; padding-left: 57px" />
            <el-button type="primary"
                       style="margin-left: 10px"
                       @click="commentInsert(comment.commenterid,comment.commentid)">
              评论
            </el-button>
            <el-button @click="comment.inputFlag = false">收起</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="editorCard">
      <div class="editorContainer">
        <tinymce v-model="comment"
                 :setup="setup"
                 :setting="setting"
                 :height="300" />
      </div>

      <div class="submit">
        <el-button type="primary"
                   style="float: right"
                   @click="commentInsert(articleInfo.authorid,-1)"><i class="el-icon-s-promotion" /><span>提交 </span></el-button>
        <br style="clear: both">
      </div>
    </div>
    <!-- 弹出的编辑界面 -->
    <el-dialog title="修改"
               :visible.sync="editFlag"
               center
               :before-close="editCancel">
      <table id="dialogTable"
             style="min-witdh:810px">
        <tr>
          <td width="60px">标题：</td>
          <td>
            <el-input v-model="editArticle.title"
                      placeholder="请输入标题" />
          </td>
        </tr>
        <tr>
          <td width="60px">状态：</td>
          <td>
            <el-select v-model="editArticle.statusflag"
                       placeholder="请选择帖子状态">
              <el-option v-for="option in statusOptions"
                         :key="option"
                         :value="option.value"
                         :label="option.label" />
            </el-select>
          </td>
        </tr>
        <tr>
          <td width="60px">内容：</td>
          <td width="800px">
            <div>
              <tinymce v-model="editArticle.content"
                       :setup="setup"
                       :setting="setting"
                       :height="300" />
              <!-- <quill-editor id="dialogEditor"
                            v-model="dialogContent"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @ready="onEditorReady($event)" /> -->
            </div>
          </td>
        </tr>
      </table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary"
                   @click="editConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出的举报框 -->
    <el-dialog title="举报"
               :visible.sync="accuseFlag"
               center>
      <el-form :model="accuseForm"
               :rules="accuseFormRules">
        <el-form-item label="请选择投诉举报类型："
                      prop="type">
          <br>
          <el-radio-group v-model="accuseForm.type">
            <el-radio :label="0">色情低俗</el-radio>
            <el-radio :label="1">辱骂攻击</el-radio>
            <el-radio :label="2">时政信息不实</el-radio>
            <el-radio :label="3">其他违规信息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请填写举报理由：">
          <el-input v-model="accuseForm.memo" />
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="accuseFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="commitReport">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出的处理框 -->
    <el-dialog title="处理"
               :visible.sync="punishFlag"
               center>
      <el-form :model="punishForm"
               label-width="140px">
        <el-form-item label="是否删帖">
          <el-switch v-model="punishForm.isdelete"
                     active-color="#FF0000" />
        </el-form-item>
        <el-form-item label="是否禁言">
          <el-switch v-model="punishForm.ismute"
                     active-color="#FF0000" />
        </el-form-item>
        <el-form-item v-if="punishForm.ismute"
                      label="禁言截至时间">
          <el-date-picker v-model="punishForm.speaktime"
                          type="datetime"
                          placeholder="选择日期时间"
                          align="right"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="理由">
          <el-input v-model="punishForm.memo"
                    type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="punishFlag == false">取 消</el-button>
        <el-button type="primary"
                   @click="commitPunish">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getArtcileById, updateArticle } from '@/api/bbs/article'
import { listComment, insertComment } from '@/api/bbs/comment'
import { addPunish } from '@/api/bbs/punish'
import { listReport, getReport, delReport, addReport, updateReport, exportReport } from '@/api/bbs/report'
export default {
  name: 'ArticleDetail',
  components: { Tinymce },
  data () {
    return {
      constArticleId: null,
      articleInfo: {
        articleid: null,
        authorid: null,
        commentnumber: null,
        communityid: null,
        content: null,
        createtime: null,
        deleteflag: null,
        picurls: null,
        statusflag: null,
        theme: null,
        title: null,
        viewnumber: null,
        nickName: null
      },
      themeWords: [
        '[邻里之间]',
        '[闲物置换]',
        '[家政服务]',
        '[建言献策]'
      ],
      editArticle: {
        articleid: null,
        content: null,
        title: null
      },
      pickerOptions: {
        // 禁言快捷的时间选择
        shortcuts: [
          {
            text: '一天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一个月',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      comments: [],
      punishFlag: false, // 处理dialog显示控制
      punishForm: {
        articleid: null,
        punishedid: null,
        isdelete: false,
        ismute: false,
        speaktime: null,
        memo: null,
        operatetime: null,
        communityid: null,
        fromsource: 1
      },
      statusFlag: true,
      dialogStatusFlag: null,
      accuseFlag: false,
      accuseForm: {
        articleid: null,
        type: null,
        memo: '',
        fromsource: 1
      },
      accuseFormRules: {
        type: [{ required: true }]
      },
      statusOptions: [
        {
          label: '默认',
          value: false
        },
        {
          label: '已置换',
          value: true
        }
      ],
      editFlag: false,
      comment: '',
      dialogContent: '',
      commentInput: '',
      newComment: {
        parentcommentid: null,
        articleid: null,
        content: '',
        commentedid: null,
        createtime: null
      }
    }
  },
  computed: {
    replyTo () {
      return function (username) {
        return '回复' + username
      }
    },
    generateId () {
      return function (commentId) {
        const index = commentId - 1
        return 'commentEdit' + index
      }
    }
  },
  created () {
    this.constArticleId = this.$route.params.id
    this.initArticle(this.constArticleId)
  },
  methods: {
    dialogShow () {
      this.editFlag = true
      this.initEditArticle()
    },
    initArticle (arcitleid) {
      getArtcileById(parseInt(arcitleid)).then((response) => {
        this.articleInfo.articleid = response.articleid
        this.articleInfo.authorid = response.authorid
        this.articleInfo.commentnumber = response.commentnumber
        this.articleInfo.communityid = response.communityid
        this.articleInfo.content = response.content
        this.articleInfo.createtime = response.createtime
        this.articleInfo.deleteflag = response.deleteflag
        this.articleInfo.picurls = response.picurls
        this.articleInfo.statusFlag = response.statusflag
        this.articleInfo.theme = response.theme
        this.articleInfo.title = response.title
        this.articleInfo.viewnumber = response.viewnumber
        this.articleInfo.nickName = response.nickName
      })
      listComment(parseInt(arcitleid)).then((response) => {
        this.comments = response.rows
      })
    },
    initEditArticle () {
      this.editArticle.articleid = this.articleInfo.articleid
      this.editArticle.content = this.articleInfo.content
      this.editArticle.title = this.articleInfo.title
      this.editArticle.statusflag = this.articleInfo.statusflag
      console.log(this.editArticle.content)
    },
    resetNewComment () {
      this.newComment.parentcommentid = null
      this.newComment.articleid = null
      this.newComment.content = ''
      this.newComment.commentedid = null
      this.newComment.createtime = null
    },
    commentInsert (commenterid, commentid) {
      if (commentid != -1) {
        if (this.newComment.content != '') {
          this.newComment.parentcommentid = commentid
          this.newComment.commentedid = commenterid
          this.newComment.articleid = this.articleInfo.articleid
          this.newComment.createtime = this.getTime()
          insertComment(JSON.stringify(this.newComment)).then(() => {
            this.msgSuccess('评论成功')
            this.resetNewComment()
            this.initArticle(this.constArticleId)
          })
        } else {
          this.msgInfo('评论为空')
        }
      } else {
        if (this.comment != '') {
          this.newComment.parentcommentid = commentid
          this.newComment.commentedid = commenterid
          this.newComment.articleid = this.articleInfo.articleid
          this.newComment.createtime = this.getTime()
          this.newComment.content = this.comment
          var nc = this.newComment
          insertComment(nc).then(() => {
            this.msgSuccess('评论成功')
            this.resetNewComment()
            this.initArticle(this.constArticleId)
          })
        } else {
          this.msgInfo('评论为空')
        }
      }
    },
    gotobuttom () {
      window.scrollTo(
        0,
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight
      )
    },
    editConfirm () {
      updateArticle(this.editArticle).then(() => {
        this.msgSuccess('帖子修改成功')
        this.initArticle(this.constArticleId)
      })
      this.editFlag = false
    },
    editCancel () {
      this.editFlag = false
      this.editArticle.content = null
      this.editArticle.title = null
      this.editArticle.statusflag = null
    },

    commitPunish () {
      this.punishForm.articleid = this.articleInfo.articleid
      this.punishForm.punishedid = this.articleInfo.authorid
      this.punishForm.isdelete = this.punishForm.isdelete == false ? 0 : 1
      this.punishForm.ismute = this.punishForm.ismute == false ? 0 : 1
      this.punishForm.operatetime = this.getTime()
      this.punishForm.communityid = this.articleInfo.communityid
      console.log(this.punishForm.isdelete)
      if (this.punishForm.isdelete == 1) {
        const query = {
          articleid: this.articleInfo.articleid,
          deleteflag: 1,
        }
        console.log(query)
        updateArticle(query).then(response => {
          this.msgSuccess('删帖成功')
        })
      }
      addPunish(this.punishForm).then(response => {
        this.msgSuccess('处理成功')
        this.punishFlag = false
        this.$router.push('/bbsIndex/bbsIndex')
      })
    },
    deleteComment (index) {
      this.comments[index - 1].deleteFlag = true
    },
    showInputComment (index) {
      const id = index
      console.log(id)
      this.comments[id].inputFlag = true
      const targetId = 'commentEdit-' + (id + 1)
      console.log(targetId)
      document
        .getElementById(targetId)
        .scrollIntoView({ block: 'center', behavior: 'smooth' })
    },
    closeEdit (commentId) {
      if (this.comments[commentId - 1].inputFlag) {
        this.comments[commentId - 1].inputFlag = false
      }
    },
    test () {
      listComment()
    },
    commitReport () {
      this.accuseForm.articleid = this.constArticleId
      console.log(this.accuseForm)
      addReport(this.accuseForm).then(response => {
        this.msgSuccess('举报成功')
        this.accuseFlag = false
      })
    }

  }
}
</script>

<style >
#allDetail {
  width: 1200px;
  margin: 15px auto;
}
.myDiv {
  width: 1200px;
  height: 60px;
  margin: 15px auto;
}
.title {
  color: #6d7e8d;
  margin-left: 80px;
  padding-left: 20px;
  padding-top: 80px;
  padding-bottom: 35px;
  word-spacing: 1.5px;
  font-size: 20px;
  text-align: left;
}
.artInfoDiv {
  margin-right: 100px;
  margin-left: 80px;
  color: #6d7e8d;
  font-size: 16px;
  word-spacing: 3px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e2e4;
}
.artInfoDiv span {
  margin-left: 18px;
}
.artInfoDiv a {
  float: right;
}
#deleteCommentDiv {
  padding-left: 47px;
  margin-top: 10px;
  min-height: 120px;
  color: #a8afbb;
}
.artInfoDiv span i {
  margin-right: 10px;
}
.articleContainer {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.el-card {
  margin-top: 30px;
  padding: 0;
}
.card,
.editorCard {
  margin-top: 30px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.editorCard {
  margin-bottom: 150px;
}
.editorContainer {
  padding: 15px 20px;
}
.submit {
  padding: 15px 20px;
}
.cardHeader {
  padding: 20px 40px;
  color: #647787;
  font-size: 14px;
  border-bottom: 1px solid #eef0f1;
}
.emptyComment {
  height: 400px;
  padding: 20px 40px;
  color: #647787;
  font-size: 14px;
  border-bottom: 1px solid #eef0f1;
}
.empty {
  height: 400px;
  width: 100%;
}
.postStatus {
  position: relative;
  margin-left: 60%;
  height: 0;
  overflow: visible;
  width: 100%;
  transform: translate(0, -50px);
}
.articleContent {
  padding-top: 15px;
  margin-left: 100px;
  margin-right: 100px;
  padding-bottom: 40px;
  font-size: 16px;
  line-height: 23px;
  text-indent: 2em;
}
.comments {
  padding: 30px 40px;

  border-bottom: 1px solid #eef0f1;
}
.comments a {
  color: #46a6ff;
  font-size: 14px;
}
#cid {
  float: right;
}
#cdate {
  color: #a8afbb;
  font-size: 12px;
}

.message {
  padding-left: 47px;
  margin: 10px 0;
  min-height: 120px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f1;
  word-spacing: 0.2em;
  line-height: 1.5em;
}
.comment_in_comment {
  padding-left: 47px;
  margin: 10px 0;
}
.childComment {
  margin: 18px 0;
}
.c_in_c {
  padding-left: 55px;
  margin: 10px 0;
}
#dialogTable {
  margin: 0 35px;
}
#dialogEditor {
  width: 100%;
}
#dialogTable tr td:first-child {
  vertical-align: top;
  padding-top: 5px;
}
/*.ql-editor {*/
/*  min-height: 300px;*/
/*}*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
